/**
 * Created by Administrator on 2017/8/5.
 */
/**
 * Created by Administrator on 2017/7/10.
 */

class BrushCard extends React.Component {
    constructor(props) {
        super(props);
        this.commLoadComplete = this.commLoadComplete.bind(this);
        this.state = {
            visible: false,
            visitorData: null,
            inputStartDate: '',
            inputEndDate: ''
        };
    }

    commLoadComplete() {
        layui.use(['form', 'laypage', 'laydate'], function () {
            this.form = layui.form();
            this.layer = layui.layer;
            this.layui = layui;

            this.setState({
                inputStartDate: laydate.now(-7, 'YYYY-MM-DD'),
                inputEndDate: laydate.now()
            });

            let start = {
                min: '2017-06-16 23:59:59',
                max: laydate.now(),
                istoday: false,
                isclear: false, //是否显示清空
                issure: false, //是否显示确认
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas; //将结束日的初始值设定为开始日
                    let cur7 = adjustDate(convertString2Date(datas), 7 * 60 * 60 * 24);
                    let now = convertString2Date(laydate.now());
                    // 开始日选好后，重置开始日的最大日期为前第一天
                    end.max = convertDate2String(cur7 > now ? now : cur7, true);
                    this.setState({
                        inputStartDate: datas,
                        inputEndDate: end.max,
                    });
                }.bind(this)
            };

            let end = {
                min: laydate.now(-7, 'YYYY-MM-DD'),
                max: laydate.now(),
                istoday: false,
                isclear: false, //是否显示清空
                issure: false, //是否显示确认
                choose: function (datas) {
                    this.setState({
                        inputEndDate: datas,
                    });
                }.bind(this)
            };

            ReactDOM.findDOMNode(this.refs.refStartDate).onclick = function () {
                start.elem = this;
                laydate(start);
            };
            ReactDOM.findDOMNode(this.refs.refEndDate).onclick = function () {
                end.elem = this
                laydate(end);
            };

            this.queryBrushCard();
        }.bind(this));
    }

    seeBrushCardInfo(url) {
        if (url !== undefined && url !== '') {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            this.layer.msg("此记录无照片!");
        }
    }

    queryBrushCard() {
        let buildingInfo = this.refs.buildingSelectUtils.getData();
        let params = {};
        params.page = 1;
        params.pageSize = 10;
        let roomInfo = "";
        params.ownerName = this.refs.ownerName.value;
        roomInfo += buildingInfo.building;
        roomInfo += buildingInfo.unit;
        roomInfo += buildingInfo.floor;
        roomInfo += buildingInfo.room;
        params.startDate = this.refs.refStartDate.value;
        params.endDate = this.refs.refEndDate.value;
        params.roomInfo = roomInfo;
        params.commCode = buildingInfo.commCode;

        let page = 'page';
        this.updateBrushCardList(params, page);
    }

    updateBrushCardList(params, page) {
        postJson('/card/queryBrush.x', $.param(params), function (data) {
            this.brushCardList = data.list;
            this.setState({
                tBody: ''
            });
            if (params.page === 1) {
                layui.laypage({
                    cont: page
                    , pages: Math.ceil(data.size / params.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            params.page = row.curr;
                            this.updateBrushCardList(params);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    setTBody() {
        if (this.brushCardList) {
            return this.brushCardList.map(function (array) {
                return (<tr>
                    <td>{array.cardNo}</td>
                    <td>{array.ownerName}</td>
                    <td>{array.roomInfo === undefined ? "业主不存在" : array.roomInfo}</td>
                    <td>{array.deviceInfo}</td>
                    <td>{array.swipeCardTime}</td>
                    <td>{array.direction == 1?'出门':'进门'}</td>
                    <td>
                        {
                            array.imageUrl ?
                                <button type="button" className="layui-btn layui-btn-primary layui-btn-small"
                                        onClick={() => this.seeBrushCardInfo(array.imageUrl)}>查看图片
                                </button> : "无照片"}
                    </td>
                </tr>);
            }.bind(this));
        }
    }

    render() {
        return <Frame header="刷卡列表">
                <form className="layui-form layui-form-pane">
                    <div className="layui-form-item">
                        <label className="layui-form-label">业主名</label>
                        <div className="layui-input-inline">
                            <input type="text" name="ownerName" ref="ownerName" className="layui-input"/>
                        </div>

                        <label className="layui-form-label">起始日期</label>
                        <div className="layui-input-inline">
                            <input className="layui-input" value={this.state.inputStartDate} placeholder="选择日期"
                                   ref="refStartDate"/>
                        </div>

                        <label className="layui-form-label">结束日期</label>
                        <div className="layui-input-inline">
                            <input className="layui-input" value={this.state.inputEndDate} placeholder="选择日期"
                                   ref="refEndDate"/>
                        </div>
                    </div>
                    <div className="layui-form-item">
                        <BuildingSelectUtils ref="buildingSelectUtils" commLoadComplete={this.commLoadComplete}/>
                        <button type="button" className="layui-btn"
                                onClick={() => this.queryBrushCard()}>查询
                        </button>
                    </div>
                    <div className="layui-form-item">
                        <table className="tabel layui-table">
                            <colgroup>
                                <col/>
                                <col/>
                                <col/>
                                <col/>
                                <col/>
                                <col width="100"/>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>门禁卡编号</th>
                                <th>业主名称</th>
                                <th>住宅信息</th>
                                <th>设备信息</th>
                                <th>刷卡时间</th>
                                <th>方向</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody name="tBody" id="tBody">{this.setTBody()}</tbody>
                        </table>
                    </div>

                </form>
                <div id="page"></div>
                <div style={{clear: "both"}}></div>
        </Frame>

    }
}

ReactDOM.render(
    <BrushCard/>,
    document.getElementById('example')
);